<template>
	<view>
		<view class="container">
			<view class='edit-container'>
				<view class="a-item">
					<view class="icon">
						<image class="img" src="/static/images/icon/receiver.png"></image>
					</view>
					<view class="input-wrap">
						<input cursor-spacing='100' class='a-input' v-model="formData.name" placeholder='姓名'></input>
					</view>
				</view>
				<view class="a-item">
					<view class="icon">
						<image class="img" src="/static/images/icon/mobile.png"></image>
					</view>
					<view class="input-wrap">
						<input cursor-spacing='100' class='a-input' v-model="formData.mobile" type='number' placeholder='手机号码'></input>
					</view>
				</view>
				<view class="a-item">
					<view class="icon">
						<image class="img" src="/static/images/icon/position.png"></image>
					</view>
					<view class="input-wrap" @click="chooseRegion">
						<input cursor-spacing='100' class="a-input" :value="full_region" disabled="true" placeholder="选择省份、城市、区县" />
						<view class="arrow"></view>
					</view>
				</view>
				<view class="a-item">
					<view class="icon">
						<image class="img" src="/static/images/icon/address.png"></image>
					</view>
					<view class="input-wrap">
						<input cursor-spacing='100' v-model="formData.address" class="a-input" placeholder="详细地址, 如街道、小区或写字楼等" />
					</view>
				</view>
			</view>
			<view class="default-wrap">
				<view class="text">设为默认地址</view>
				<u-switch class="switch" :activeValue="1" :inactiveValue="0" v-model="formData.is_default"></u-switch>
			</view>
			<view class='btn-wrap'>
				<view class="btn active"  @click="saveAddress">保存</view>
			</view>
			<view class='delete-wrap' v-if="addressId">
					<view class='btn' @click="delAddress">删除</view>
				</view>
			<view class="region-select" v-if="regionShow">
					<view class="hd">
						<view class="region-selected">
							<!-- <view class="item disabled selected">index 0 安徽省 type 1</view> -->
							<!-- <view class="item disabled selected">index 1 合肥市 type 2</view> -->
							<!-- <view class="item disabled selected">index 2 瑶海区 type 3 </view> -->
							<!-- regionType 当前处于的选择的地址  类型 -->
							<!-- selected 激活， regionType等于当前的循环索引+1 -->
							<!-- disabled 禁用， item.id 如果是0就表示还没有选择 -->
							<view class="item"  @click="selectRegionType(item,index)"  :class="{ selected:regionType === index+1,disabled: item.id === 0  }"  v-for="(item,index) in selectRegionList" :key="index">{{item.name}}</view>
						</view>
						<view class="done" :class="{ disabled:confirmDisabled }" @click="doneSelectRegion">确定</view>
					</view>
					<view class="bd">
						<scroll-view scroll-y class="region-list">
							<!-- 地址列表 -->
							<view class="item"  @click="selectRegion(item)"  :class="{selected:item.selected}" v-for="item in regionList" :key="item.id">{{item.name}}</view>
						</scroll-view>
					</view>
				</view>
		</view>
		<view class="bg-mask" v-if="regionShow" @click="cancelSelectRegion"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					name:'',  // 姓名
					mobile:'', // 手机号
					address:'', // 详细地址信息
					province_id:'', // 省份ID
					city_id:'',  // 城市ID
					district_id:'', // 区县ID
					is_default:0  // 是否默认
				},
				regionShow:false, // 地区选择展示
				selectRegionList: [  // 用于渲染顶部位置信息
					{ id: 0,name: '省份',parent_id: 1,type: 1 },
					// { id: 8,name: '吉林省',parent_id: 1,type: 1 },
					{ id: 0,name: '城市',parent_id: 1,type: 2 },
					{ id: 0,name: '区县',parent_id: 1,type: 3 }
				],
				regionType:1, // 1选择省份， 2选择城市， 3选择区县
				regionList:[],  // 地址列表
				addressInfo:{   // 记录省市县名称
					province_name:'',
					city_name:'',
					district_name:''
				},
			    addressId:'' // 修改地址ID
			};
		},
		computed:{
			// 确定按钮是否禁用
			confirmDisabled(){
				// 思路： 如果selectRegionList只要有一个元素的id还是0，说明就没选择，就要禁用
				return this.selectRegionList.some(item=>item.id === 0)
			},
			// 省市县在一起的描述
			full_region(){
				return Object.values(this.addressInfo).join('')
			}
		},
		onLoad(options) {
			console.log(options); // 页面传入的数据
			if(options.id){
				this.addressId = options.id
				uni.setNavigationBarTitle({
					title:'修改地址'
				})
				this.getAddressInfo()
			}
		},
		methods: {
			// 获取地址信息的方法
			async getAddressInfo(){
				let res = await uni.$http.get('/address/addressDetail',{
					params:{ id:this.addressId }
				})
				this.formData = res
				this.addressInfo.province_name = res.province_name
				this.addressInfo.city_name = res.city_name
				this.addressInfo.district_name = res.district_name
			},
			// 地址点击，选择省市县数据
			chooseRegion() {
				this.regionShow = true
				// 判断是否选择过地址
				if(this.formData.province_id > 0 && this.formData.city_id >0 && this.formData.district_id > 0){
					// 	设置区域选择数据	
					this.selectRegionList[0].id = this.formData.province_id
					this.selectRegionList[0].name = this.addressInfo.province_name
					this.selectRegionList[0].parent_id =1
					this.selectRegionList[1].id = this.formData.city_id
					this.selectRegionList[1].name = this.addressInfo.city_name
					this.selectRegionList[1].parent_id = this.formData.province_id
					this.selectRegionList[2].id = this.formData.district_id
					this.selectRegionList[2].name = this.addressInfo.district_name
					this.selectRegionList[2].parent_id = this.formData.city_id
					// 三个都有，目前就是处于县
					this.regionType = 3
					// 现在处于县，那么就要获取该市下面的所有县
					this.getRegionList(this.formData.city_id)
				}else{
					// 情况1：从未选择过打开了   情况2：之前选择过，点击去了取消(注意了selectRegionList可能有残留数据)
					this.selectRegionList= [ 
						{ id: 0,name: '省份',parent_id: 1,type: 1 },
						{ id: 0,name: '城市',parent_id: 1,type: 2 },
						{ id: 0,name: '区县',parent_id: 1,type: 3 }
					],
					// 设置类型为1级
					this.regionType = 1
					// 获取1级省份数据
					this.getRegionList(1)
				}
				
			},
			// 遮罩层点击，取消选择地址
			cancelSelectRegion(){
				this.regionShow = false
				this.regionType = this.confirmDisabled ? 1 : 3
			},
			// 获取地址数据
			async getRegionList(regionId){
				let res = await uni.$http.get('/region/list',{
					params:{parentId:regionId }
				})
				// 我们想给地址列表数据里面增加上一个selected字段来判断是否被勾选中
				// 如何判断呢？
				// 条件1：地址列表的数据 和  regionType 要一致， 
					// 比如regionType是1 列表一定就是省份的数据；
					// regionType是2 列表一定就是城市的数据；
					// regionType是3 列表一定就是区县的数据；
				// 条件2：我的selectRegionList对应位置数据(省市县)和列表(省市县)中id一直的元素就是要选中
				this.regionList = res.map(item=>{
					// selectRegionList 数据 [选择的省份数据信息0，选择的城市数据信息1，选择的区县数据信息2]
					// regionType  1  2  3
					// this.selectRegionList[this.regionType-1] 对应的当前类型选择的数据信息
					if( this.regionType === item.type  && this.selectRegionList[this.regionType-1].id === item.id ){
						item.selected = true
					}else{
						item.selected = false
					}
					return item
				})
			},
			// 地址列表点击了
			selectRegion(val){
				console.log(val);  // val.type - 1   对应存储的索引
				// this.selectRegionList[val.type-1]  // 对应元素的内容
				this.selectRegionList.splice(val.type-1,1,val)
				// 展示下一级数据
				if(this.regionType !== 3){
					// 如果目前不是最下面一级(县),需要切换类型，获取列表
					this.regionType++
					// 获取下一级地址列表
					this.getRegionList(val.id) // val.id 就是作为下一级的parent_id
				}
				// 重置的逻辑
				this.selectRegionList = this.selectRegionList.map((item,index)=>{
					// 重新选择了省(0)   重置 市  县
					// 重新选择了市(1)   重置 县
					// 重新选了县(2)	 不需要做什么
					if(index > val.type -1 ){
						item.id = 0 
						item.name =  index === 1 ? '城市':'区县'
						item.parent_id = 0
					}
					return item
				})
				// 标记已选择
				this.regionList = this.regionList.map(item=>{
					if( this.regionType === item.type  && this.selectRegionList[this.regionType-1].id === item.id ){
						item.selected = true
					}else{
						item.selected = false
					}
					return item
				})
			},
			// 顶部头部点击
			selectRegionType(val,idx){
				// 如果对应的id为0，说明还没有选择，就不要切换点击，跳出
				if(this.selectRegionList[idx].id === 0) return
				// 如果当前是高亮，点击也没有意义
				if(val.type === this.regionType) return
				// val 就是头部点击的信息，选择的省市县里面的某一个的详细选中信息
				this.regionType = idx + 1
				// 获取地址的列表
				this.getRegionList(val.parent_id)
			},
			// 确定按钮点击保存
			doneSelectRegion(){
				// 判断禁用
				if(this.confirmDisabled) return
				// 存储地址ID
				this.formData.province_id = this.selectRegionList[0].id
				this.formData.city_id = this.selectRegionList[1].id
				this.formData.district_id = this.selectRegionList[2].id
				// 存储名称
				this.addressInfo.province_name = this.selectRegionList[0].name
				this.addressInfo.city_name = this.selectRegionList[1].name
				this.addressInfo.district_name = this.selectRegionList[2].name
				// 关闭弹框
				this.regionShow = false
			},
			// 保存地址
			async saveAddress(){
				// 1. 数据的校验,不做细致的校验，只做空置的校验
				let valueArr = Object.values(this.formData)
				if( valueArr.some(item=> item==='') ) return uni.showToast({
					title:'有数据没填写',
					icon:'error'
				})
				// 2. 发起请求
				await uni.$http.post('/address/saveAddress',this.formData)
				// 3. 提示成功
				uni.showToast({
					title: this.addressId ? '修改成功' : '添加成功',
					icon:'success',
					duration:300
				})
				// 4.跳转
				setTimeout(()=>{
					uni.navigateBack()
				},300)
			},
			// 删除事件函数
			async delAddress(){
				// 1. 弹出确认框
				const [err,res] = await uni.showModal({
					title:'提示',
					content:"确认删除该地址吗？"
				})
				if(res.cancel) return
				// 2. 发生删除请求
				await uni.$http.post('/address/deleteAddress',{
					id:this.addressId
				})
				// 3.提示成功
				uni.showToast({
					title:'删除成功',
					duration:300
				})
				setTimeout(()=>{
					uni.navigateBack()
				},300)
			}
		},
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;
		background-color: #f8f8f8;
	}

	.container {
		min-height: 100%;
		/* align-items: stretch; */
		background: #f8f8f8;
		overflow-x: hidden;
		padding: 30rpx;
	}

	.edit-container {
		background: #fff;
		width: 100%;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
	}

	.a-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30rpx;
	}

	.a-item .icon {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 20rpx;
	}

	.a-item .icon .img {
		width: 36rpx;
		height: 36rpx;
	}

	.a-item .input-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.a-item:last-child .input-wrap {
		border-bottom: none;
	}

	.a-item .input-wrap .a-input {
		font-size: 28rpx;
		width: 100%;
	}

	.a-item .input-wrap .arrow {
		width: 10rpx;
		height: 10rpx;
		border-top: 4rpx solid #aaa;
		border-right: 4rpx solid #aaa;
		transform: rotate(45deg);
	}

	.a-input {
		font-size: 28rpx;
		width: 100%;
	}

	.confirm-box {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		/* border-top:1px solid #eee;  */
		background: linear-gradient(to right, #ff116a, #fe5b46);
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.default-input {
		font-size: 28rpx;
		color: #233445;
		line-height: 60rpx;
		margin: 0 auto;
		width: 300rpx;
	}

	.region-select {
		width: 100%;
		height: 600rpx;
		background: #fff;
		position: fixed;
		z-index: 10;
		left: 0;
		bottom: 0;
	}

	.region-select .hd {
		height: 108rpx;
		width: 100%;
		border-bottom: 1px solid #f4f4f4;
		padding: 46rpx 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	.region-select .region-selected {
		float: left;
		height: 60rpx;
		display: flex;
	}

	.region-select .region-selected .item {
		max-width: 140rpx;
		margin-right: 30rpx;
		text-align: left;
		line-height: 60rpx;
		height: 100%;
		color: #333;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.region-select .region-selected .item.disabled {
		color: #999;
	}

	.region-select .region-selected .item.selected {
		color: #ff3456;
	}

	.region-select .done {
		float: right;
		height: 60rpx;
		width: 60rpx;
		border: none;
		background: #fff;
		line-height: 60rpx;
		text-align: center;
		color: #ff3456;
		font-size: 28rpx;
	}

	.region-select .done.disabled {
		color: #999;
	}

	.region-select .bd {
		height: 492rpx;
		width: 100%;
		padding: 0 30rpx;
	}

	.region-select .region-list {
		height: 492rpx;
	}

	.region-select .region-list .item {
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		text-align: left;
		color: #333;
		font-size: 28rpx;
	}

	.region-select .region-list .item.selected {
		color: #ff3456;
	}

	.bg-mask {
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8;
	}

	.default-wrap {
		background: #fff;
		width: 100%;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		box-shadow: 2rpx 8rpx 18rpx #f1f1f1;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.default-wrap .text {
		font-size: 28rpx;
	}

	.btn-wrap {
		width: 100%;
		padding: 24rpx 0;
		/* position: fixed;
    bottom: 0;
    left: 0; */
		box-sizing: border-box;
	}

	.btn-wrap .btn {
		font-size: 28rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 10rpx;
		width: 100%;
		color: #fff;
		background: #bbb;
		box-shadow: 0rpx 10rpx 20rpx #ccc;
	}

	.btn-wrap .btn.active {
		background: linear-gradient(to right, #ff3456, #ff347d);
		box-shadow: 0rpx 10rpx 20rpx #f1f1f1;
		color: #fff;
	}

	.delete-wrap {
		width: 100%;
		padding: 24rpx;
		/* position: fixed;
    bottom: 0;
    left: 0; */
		box-sizing: border-box;
	}

	.delete-wrap .btn {
		font-size: 28rpx;
		color: #5d6777;
		text-align: center;
	}
</style>
